<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.hosname" placeholder="医院名称"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchObj.hoscode" placeholder="医院编号"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="warning" icon="el-icon-refresh-right" @click="reset">重置</el-button>
    </el-form>

    <div>
      <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeRows">批量删除</el-button>
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        type="index"

        label="序号"
        width="120"
      />
      <el-table-column
        prop="hosname"
        label="医院名称"
        width="120"
      />
      <el-table-column
        prop="apiUrl"
        label="api基础路径"
        width="220"
      />
      <el-table-column
        prop="hoscode"
        label="医院编号"
        width="120"
      />

      <el-table-column
        prop="contactsName"
        label="联系人姓名"
        width="120"
      />

      <el-table-column
        prop="contactsPhone"
        label="联系人姓名"
        width="120"
      />

      <el-table-column
        label="状态"
      >
        <template slot-scope="scope">
          {{ scope.row.status === 1 ? '启用' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column label="启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ccc"
            @change="lockHostSet(scope.row.id,scope.row.status)"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">

          <el-button type="danger" size="mini"
                     icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除
          </el-button>
          <router-link :to="'/hospSet/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
          </router-link>

          <!--          <el-button v-if="scope.row.status==1" type="primary" size="mini"-->
          <!--                     icon="el-icon-delete" @click="lockHostSet(scope.row.id,0)">锁定</el-button>-->
          <!--          <el-button v-if="scope.row.status==0" type="danger" size="mini"-->
          <!--                     icon="el-icon-delete" @click="lockHostSet(scope.row.id,1)">取消锁定</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <div>
      <el-pagination
        :current-page="current"
        :page-sizes="[2,5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>
// 引入接口定义文件
import hospset from '@/api/hospset'

export default {
  name: 'List',
  // 设置数据
  data() {
    return {
      current: 1, // 当前页
      limit: 2, // 每页显示条数
      searchObj: {}, // 搜索对象
      list: [], // 列表数据
      total: 0, // 总条数
      tableData: [], // 表格数据
      multipleSelection: []// 多选数据
    }
  },
  created() { // 页面创建完成
    this.getList()
  },
  methods: {
    //医院设置的锁定和解锁
    lockHostSet(id, status) {
      hospset.lockHospitalSet(id, status).then(res => {
        this.getList(this.current)//刷新当前页
      })
    },

    // 医院设置列表方法
    getList() {
      hospset.getHospSetList(this.current, this.limit, this.searchObj).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      }).catch(err => {
        console.log(err)
      })
    },
    // 页码改变
    handleSizeChange(limit) {
      this.limit = limit
      this.getList()
    },
    // 当前页改变
    handleCurrentChange(current) {
      this.current = current
      this.getList()
    },
    // 重置
    reset() {
      this.searchObj = {}
      this.getList()
    },
    // 删除医院设置的方法
    removeDataById(id) {
      this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 确定执行then方法
        // 调用接口
        hospset.deleteHospSet(id)
          .then(response => {
            // 提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 刷新页面
            this.getList(this.current)//刷新当前页
          })
      })
    },
    // 批量删除
    removeRows() {
      this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 确定执行then方法
        //第一种方法
        // var idList = []
        // // 遍历数组得到每个id值，设置到idList里面
        // for (var i = 0; i < this.multipleSelection.length; i++) {
        //   var obj = this.multipleSelection[i]
        //   var id = obj.id
        //   idList.push(id)// 把id放到数组里面
        // }
        // 第二种方法
        const idList = this.multipleSelection.map(item => item.id)  // 把id放到数组里面 转换成数组形式
        // 调用接口
        hospset.batchRemoveHospSet(idList)
          .then(response => {
            // 提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 刷新页面
            this.getList(this.current)//刷新当前页
          })
      })
    },
    // 获取复选框数据
    handleSelectionChange(selection) {
      console.log(selection)
      this.multipleSelection = selection
    }

  }

}
</script>

<style scoped>

</style>
